<template>
  <div class="px-[17px] pb-[50px]">
    <p class="text-center text-[#fff] mb-[24px] pt-[10px]">九龙坡区城市运行和治理AI日报</p>
    <div class="flex mb-[28px]">
      <img src="../assets/icon1.png" alt="">
      <div class="ml-[10px]">
        <p class="text-[#2FB2FE] text-[14px] font-400">区政府办公室（区治理中心）</p>
        <p class="text-[#95C9E8] text-[12px] font-400">时间：{{ reportDate }}</p>
      </div>
    </div>
    <div class="w-[100%] h-[31px] is-title-bg  pl-[25px]  mb-[10px]">
      事件总量
    </div>
    <div class="w-[100%] h-[400px]">
      <EcharsWrapper :chartData="localChartData"></EcharsWrapper>
    </div>
    <div class="w-[100%] h-[31px] is-title-bg  pl-[25px]  mb-[10px] mt-[30px]">
      九龙坡地图
    </div>
    <div class="is-map-bg w-full h-[312px] relative">
      <div class="absolute con-box-bg top-[250px] w-[230px] pl-[30px] pr-[15px] pt-[12px] pb-[10px]">
        <div class="text-[12px] text-[#fff] leading-[21px] relative after:absolute after:w-[20px] after:h-[20px]  after:left-[-25px] after:border-[5px] after:rounded-[20px] after:border-[#13EE50]">九龙坡区新城</div>
        <div class="text-[10px] text-[#fff] leading-[18px]">{{ jlxcData }}</div>
      </div>
      <div class="absolute con-box-bg right-[0px] top-[75px] w-[230px] pl-[30px] pr-[15px] pt-[12px] pb-[10px]">
        <div class="text-[12px] text-[#fff] leading-[21px] relative after:absolute after:w-[20px] after:h-[20px]  after:left-[-25px] after:border-[5px] after:rounded-[20px] after:border-[#E0B815]">东部城区</div>
        <div class="text-[10px] text-[#fff] leading-[18px]">{{ dbcqData }}</div>
      </div>
      
    </div>

    <div class="w-[100%] h-[31px] is-title-bg  pl-[25px]  mb-[10px] mt-[120px]">
      总体概况
    </div>
    <p class="text-[16px] leading-[28px] text-[#fff]">{{ ztgkData }}</p>
    <div class="w-[100%] h-[31px] is-title-bg  pl-[25px]  mb-[10px] mt-[50px]">
      事件分析
    </div>
    <div class="con-bg-1 mt-[15px] w-[100%] relative pb-[20px] text-[#fff] text-[16px] pt-[10px]  pl-[46px] box-border flex">
      <img src="../assets/icon8.png" class="absolute left-[10px] top-[10px]" alt="">
      <div class="flex">
        <div class=" w-[90px] ">安全运行：</div>
        <div class="flex-1">{{ aqyxData }}</div>
      </div>
    </div>
     <div class="con-bg-2 mt-[15px] w-[100%] relative pb-[20px] text-[#fff] text-[16px] pt-[10px]  pl-[46px] box-border flex">
      <img src="../assets/icon9.png" class="absolute left-[10px] top-[10px]" alt="">
      <div class="flex">
        <div class=" w-[90px] ">城市治理：</div>
        <div class="flex-1">{{ cszlData }}</div>
      </div>
    </div>
     <div class="con-bg-3 mt-[15px] w-[100%] relative pb-[20px] text-[#fff] text-[16px] pt-[10px]  pl-[46px] box-border flex">
      <img src="../assets/icon10.png" class="absolute left-[10px] top-[10px]" alt="">
      <div class="flex">
        <div class=" w-[90px] ">群众呼声：</div>
        <div class="flex-1">{{ qzhsData }}</div>
      </div>
    </div>
     <div class="con-bg-4 mt-[15px] w-[100%] relative pb-[20px] text-[#fff] text-[16px] pt-[10px]  pl-[46px] box-border flex">
      <img src="../assets/icon11.png" class="absolute left-[10px] top-[10px]" alt="">
      <div class="flex">
        <div class=" w-[90px] ">风险预警：</div>
        <div class="flex-1">{{ fxyjData }}</div>
      </div>
    </div>
        <div class="w-[100%] h-[31px] is-title-bg  pl-[25px]  mb-[10px] mt-[50px]">
      工作建议
    </div>
    <p  v-for="(item,index) in gzjyData" 
      class="text-[#fff] text-[16px] pl-[35px]  relative after:absolute after:top-0 after:left-0 after:block after:content-[''] after:w-[20px] after:h-[20px] after:rounded-[20px] after:border-[5px] after:border-[#6FCDE5] mt-[10px]">
      {{ item }}</p>

  </div>
</template>

<script setup>
import { ref,onMounted,reactive,toRefs  } from "vue"
import EcharsWrapper from "../components/echars/EcharsWrapper.vue";
import { zhuzhuangData } from "./echarsOptions.js";
import {testRequest} from "../api/index.js"
// 定义响应式数据
const reportDate = ref('加载中...');//日期
const aqyxData = ref('加载中...');//安全运行
const cszlData = ref('加载中...');//城市治理
const qzhsData = ref('加载中...');//群众呼声
const fxyjData = ref('加载中...');//风险预警
const jlxcData = ref('加载中...');//九龙新城
const dbcqData = ref('加载中...');//东部城区
const ztgkData = ref('加载中...');//总体概况
const gzjyData = ref('加载中...');//工作建议

// 创建本地的图表数据，用于响应式更新
const localChartData = ref({
  ...zhuzhuangData.value
});

testRequest().then(res=>{
  console.log(res)
  const sjl = [111,222,333,444];//事件量
  const rpjs = [111,222,333,444];//日平均数
  
  // 正确的方式更新图表数据
  localChartData.value = {
    ...localChartData.value,
    series: [
      {
        ...localChartData.value.series[0],
        data: sjl
      },
      {
        ...localChartData.value.series[1],
        data: rpjs
      }
    ]
  };
  
  console.log(".......",localChartData.value.series[0].data)
})



// onMounted(() => {
//       //就这样赋值上去就行了
//       const sjl1 = [222,222,222,222];//事件量
//       const rpjs1 = [222,222,222,222];//日平均数
//       // zhuzhuangData.value.series[0].data=sjl
//       // console.log("这是副的今日数的值",zhuzhuangData.value.series[0].data)

//   testRequest().then(res => {
//     console.log('结果', res)
//         // 更新响应式数据
//     if (res) {


//       // 处理图表数据
//       const categories = ['安全运行', '城市治理', '群众呼声', '风险预警'];
//       const sjl2 = [333,333,333,333];//事件量
//       const rpjs2 = [333,333,333,333];//日平均数
//       // zhuzhuangData.value.series[0].data = sjl2
//       // zhuzhuangData.value.series[1].data = rpjs2
//       console.log("这是副的今日数的值",zhuzhuangData.value.series[0].data)

//       // 按类别顺序提取数据
//       // categories.forEach(category => {
//       //   const item = res.detail1?.find(d => d.bk === category);
//       //   sjl.push(item ? Number(item.rpjs) : 0);
//       //   rpjs.push(item ? Number(item.sjl) : 0);
//       // });

//       // 更新图表数据
//       // zhuzhuangConfig.value.series[0].data = sjl;
//       // zhuzhuangConfig.value.series[1].data = rpjs;

//       // 安全运行数据
//       aqyxData.value = res.aqyx || '暂无数据';
//       // 城市治理数据
//       cszlData.value = res.cszl || '暂无数据';
//       // 群众呼声数据
//       qzhsData.value = res.qzhs || '暂无数据';
//       // 风险预警数据
//       fxyjData.value = res.fxyj || '暂无数据';
//       // 总体状况
//       ztgkData.value = res.ztgk || '暂无数据';
//       // 九龙新城
//       jlxcData.value = res.jlxc || '暂无数据';
//       // 东部城区
//       dbcqData.value = res.dbcq || '暂无数据';
//       // 工作建议
//       gzjyData.value = res.gzjy || '暂无数据';
      
//       // 报告日期
//       if (res.bgsjrq) {
//         const dateObj = new Date(res.bgsjrq);
//         reportDate.value = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
//       }
//     }
//   })
// })


</script>

<style scoped>
.is-title-bg {
  background: url("../assets/title.png") no-repeat center center;
  background-size: 100% 100%;
  font-size: 18px;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  line-height: 23px;
  letter-spacing: -0.25px;
}

.con-bg-1 {
  background: url("../assets/icon3.png") no-repeat center center;
  background-size: 100% 100%;
}

.con-bg-2 {
  background: url("../assets/icon4.png") no-repeat center center;
  background-size: 100% 100%;
}

.con-bg-3 {
  background: url("../assets/icon5.png") no-repeat center center;
  background-size: 100% 100%;
}

.con-bg-4 {
  background: url("../assets/icon6.png") no-repeat center center;
  background-size: 100% 100%;
}

.is-map-bg {
  background: url("../assets/icon2.jpg") no-repeat center center;
  background-size: 100% 100%;
}

.con-box-bg{
   background: url("../assets/icon7.png") no-repeat center center;
  background-size: 100% 100%;
}
</style>